import React, {useEffect, useState} from 'react'
import {RadiusButton, Toast} from 'components'
import {NavigationStackScreenComponent} from 'react-navigation-stack'
import {View, Text, TouchableOpacity, Image, Alert} from 'react-native'
import {commonStyle, definedColors, translateSize} from 'styles'
import {idCardIdentityStyle} from './style'
import assets from 'modules/assets'
import {PosModule} from 'native-modules'
import pos from 'api/pos'
import {getAuthorization, loginOut, operate, setLogin} from '../../services/authorization'
import Loading from '../../components/loading'
import {navigateReplace} from '../../services/navigation'

const IDCardIdentityScreen: NavigationStackScreenComponent<{nextRouteName: string}> = props => {
  const [readStatus, setReadStatus] = useState<
    'isReady' | 'reading' | 'success' | 'fail' | 'error'
  >('isReady')
  const [hints, setHints] = useState({
    isReady: '正在配置中...',
    reading: '正在读卡...',
    success: '读卡成功',
    fail: '读卡失败,请重新放置身份证',
    error: '读卡失败',
  })

  const readCard = () => {
    // Alert.alert('11')
    setReadStatus('isReady')
    PosModule.readCardInfo(
      msg => {
        setHints({...hints, reading: msg})
        setReadStatus('reading')
      },
      err => {
        setReadStatus('fail')
      },
    )
      .then(res => {
        setReadStatus('success')
        PosModule.stopReadCard()
        props.navigation.push('IdentityDetail', {
          nextRouteName: props.navigation.getParam('nextRouteName'),
          data: res,
          onReadAgain: () => {
            readCard()
          },
        })
      })
      .catch(err => {
        setReadStatus('error')
        PosModule.stopReadCard()
      })
  }

  useEffect(() => {
    readCard()
    return () => {
      PosModule.stopReadCard()
    }
  }, [])

  return (
    <View style={[commonStyle.containerColumn, idCardIdentityStyle.container]}>
      {/*<Text style={idCardIdentityStyle.hintFont}>{hints[readStatus]}</Text>*/}
      <Image style={idCardIdentityStyle.cardImage} source={assets.images.card} />
      <View style={idCardIdentityStyle.hintContainer}>
        {/*<Image style={idCardIdentityStyle.hintIcon} source={assets.images.icon_id_hint_info} />*/}
        <Text style={idCardIdentityStyle.hintTitle}>将身份证放置在读卡器上</Text>
        <Text style={idCardIdentityStyle.hintTitle}>系统自动读取客户信息</Text>
      </View>
      <RadiusButton
        style={{
          marginTop: translateSize(280),
          height: translateSize(96),
        }}
        onPress={() => {
          console.log(props.navigation.getParam('nextRouteName'))
          props.navigation.push('CustomerSearch', {
            nextRouteName: props.navigation.getParam('nextRouteName'),
          })
          // props.navigation.navigate('IDCardIdentity', {nextRouteName: 'BookList'})
          // props.navigation.navigate(props.navigation.getParam('nextRouteName'))
        }}>
        <Text
          style={{
            color: definedColors.white,
            fontSize: translateSize(28),
          }}>
          其他查询
        </Text>
      </RadiusButton>
      {/*<Text style={idCardIdentityStyle.hintContent}>*/}
      {/*如果长时间未能识别身份证或需识别非身份证件，请手动输入*/}
      {/*</Text>*/}
      {/*<View style={idCardIdentityStyle.btnContainer}>*/}
      {/*<Text style={[idCardIdentityStyle.hintContent, idCardIdentityStyle.btnTiltle]}>*/}
      {/*身份证：*/}
      {/*</Text>*/}
      {/*<TouchableOpacity*/}
      {/*onPress={() => {*/}
      {/*operate()*/}
      {/*PosModule.stopReadCard()*/}
      {/*props.navigation.navigate('InputIdentity', {*/}
      {/*nextRouteName: props.navigation.getParam('nextRouteName'),*/}
      {/*type: 'idcard',*/}
      {/*})*/}
      {/*}}>*/}
      {/*<Text style={idCardIdentityStyle.btn}>请输入身份证号</Text>*/}
      {/*</TouchableOpacity>*/}
      {/*</View>*/}
      {/*<View style={idCardIdentityStyle.btnContainer}>*/}
      {/*<Text style={[idCardIdentityStyle.hintContent, idCardIdentityStyle.btnTiltle]}>*/}
      {/*手机号：*/}
      {/*</Text>*/}
      {/*<TouchableOpacity*/}
      {/*onPress={() => {*/}
      {/*operate()*/}
      {/*PosModule.stopReadCard()*/}
      {/*props.navigation.navigate('InputIdentity', {*/}
      {/*nextRouteName: props.navigation.getParam('nextRouteName'),*/}
      {/*type: 'telphont',*/}
      {/*})*/}
      {/*}}>*/}
      {/*<Text style={idCardIdentityStyle.btn}>请输入手机号码</Text>*/}
      {/*</TouchableOpacity>*/}
      {/*</View>*/}
    </View>
  )
}

IDCardIdentityScreen.navigationOptions = props => {
  return {
    title: '刷身份证',
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: '#212447',
      backgroundColor: '#212447',
    },
  }
}

export default IDCardIdentityScreen
